import axios from 'axios'

import store from '@/store'

import { Loading, Message } from 'element-ui'
import router from '@/router'
// 环境变量
console.log(process.env) // 固定代码是node中自带的代理  获取开发环境的
// 创建axios实例并导出
const request = axios.create({
  // 现在是处于开发阶段  基地址是 /api
  // 项目开发结束了  项目要测试   /text-api
  // 项目开发结束了  项目要上线   /prod-api
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 10000
})
let loading
// 添加请求拦截器
request.interceptors.request.use(function(config) {
  // 在发送请求之前做些什么
  // 开启loading
  loading = Loading.service({
    lock: true, // 锁定屏幕滚动
    text: '加载中...',
    spinner: 'el-icon-loading'
  })
  const token = store.getters.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, function(error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
request.interceptors.response.use(function(response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  loading.close() // 经过响应拦截器关闭loading 写在Blob前边否则不会关

  // 在此处单独加一个分支对blob数据进行响应
  // 看他是不是Blob的实例
  if (response.data instanceof Blob) return response.data

  // loading.close() // 经过响应拦截器关闭loading 写在Blob前边否则不会关
  // console.log('经过响应拦截器了', response)
  if (response.data.success) {
    // 在响应拦截器中统一处理消息提示
    Message.success(response.data.message)
  } else {
    // Bol进入这里了 所以报错
    Message.error(response.data.message)
    // 如果登录失败(账号/密码错误)完全可以在组件内终止后续代码的执行 可以在响应
    // return
    // 手动抛出错误的promise 或者 return 都可以阻止后续代码执行
    return Promise.reject(new Error(response.data.message))
  }

  // 响应请求之前都会经过这个 直接将浏览需要的数据直接返回 扒一层 页面/组件中使用的时候 少 一次data
  return response.data
}, function(error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  loading.close() // 响应失败也要关闭loading

  console.dir(error)
  if (error.response.status === 401 && error.response.data.code === 10002) {
    Message.warning('token失效,请重新登录')
    // 1.清除个人信息 和token
    store.commit('user/logout')
    // 2.跳转到登录页面重新登录
    router.push('/login')
  }
  return Promise.reject(error)
})

export default request
